<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
        <script type="text/javascript" src="../js/qs.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.app {
				width: 780px;
				height: 1200px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="app">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
			
				<!-- <hr style="align-content: center;" width="90%"> -->
				

				<el-form-item label="姓名">
					<el-col :span="8">
						<el-form-item prop="name">
							<el-input v-model="form.name"></el-input>
						</el-form-item>				
					</el-col>
					<el-col :span="12" :offset="2">
						<el-form-item prop="phone" label="移动电话">
							<el-input v-model="form.phone"></el-input>
						</el-form-item>
					</el-col>
				</el-form-item>

				
				<el-form-item label="客户：" prop="cust">
				<el-col :span="22" >
					<el-input v-model="form.cust" disabled></el-input>
					</el-col>
				</el-form-item>

				<el-form-item>
					<el-autocomplete class="inline-input" v-model="form.cust" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect">
												<template slot-scope="{ item }">
  														  <div class="name">{{ item.cus_name }}({{item.cus_company}})</div>
												  </template>
												</el-autocomplete>

				</el-form-item>

				
				
				
				<el-form-item label="联系人分类">
					<el-col :span="10">
						<el-form-item prop="linkmantype">
							<el-select v-model="form.linkmantype" placeholder="请选择">
								<el-option :key="1211" label="非常重要" :value="1211" ></el-option>
						        <el-option :key="1212" label="重要" :value="1212"></el-option>
						        <el-option :key="1213" label="一般重要" :value="1213"></el-option>
							</el-select>
							<el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="负责业务" prop="business">
							<el-input v-model="form.business"></el-input>
						</el-form-item>
					</el-col>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-col :span="10">
						<el-select v-model="form.sex" placeholder="请选择">
							<el-option :key="1221" label="男" :value="1221"></el-option>
						    <el-option :key="1222" label="女" :value="1222"></el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-col :span="2" :offset="9">
						单位
					</el-col>
				</el-form-item>


				<el-form-item label="称谓">
					<el-col :span="10">
						<el-form-item prop="appellation">
							<el-input v-model="form.appellation"></el-input>

							<el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="类型" prop="type">

							<el-select v-model="form.type" placeholder="请选择">
								<el-option :key="1231" label="主联系人" :value="1231"></el-option>
						        <el-option :key="1232"  label="联系人" :value="1232"></el-option>
						        
							</el-select>

						</el-form-item>
					</el-col>
				</el-form-item>

				<el-form-item label="部门">
					<el-col :span="10">
						<el-form-item prop="dept">
							<el-input v-model="form.dept"></el-input>
							<el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="职务" prop="duty">
							<el-input v-model="form.duty"></el-input>
						</el-form-item>
					</el-col>
				</el-form-item>

				<el-form-item>
					<el-col :span="2" :offset="9">
						联系方式
					</el-col>
				</el-form-item>
				<el-form-item label="邮箱地址">
					<el-col :span="10">
						<el-form-item prop="email">
							<el-input v-model="form.email"></el-input>
							<el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="工作电话" prop="workphone">
							<el-input v-model="form.workphone"></el-input>
						</el-form-item>
					</el-col>
				</el-form-item>
				<el-form-item label="家庭电话">
					<el-col :span="10">
						<el-form-item prop="homephone">
							<el-input v-model="form.homephone"></el-input>
							<el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="邮编" prop="zip">
							<el-input v-model="form.zip"></el-input>
						</el-form-item>
					</el-col>
				</el-form-item>					
					
						<el-form-item label="微信" prop="wechat">
						    <el-col :span="10">
							  <el-input v-model="form.wechat"></el-input>
							</el-col>
						</el-form-item>
					
				<el-form-item>
					<el-col :span="2" :offset="9">
						其他
					</el-col>
				</el-form-item>

				<el-form-item label="爱好">
					<el-col :span="22">
						<el-form-item prop="like">
							<el-input v-model="form.like"></el-input>
						</el-form-item>
					</el-col>

				</el-form-item>
						<el-form-item label="身份证" prop="idnum">
						<el-col :span="10">
							<el-input v-model="form.idnum"></el-input>
							</el-col>
						</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-col :span="22">
						<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :rows="4" placeholder="请输入内容" v-model="form.remark">
						</el-input>
					</el-col>
				</el-form-item>

				<el-form-item>
					<el-col :span="2" :offset="9">
						用户画像
					</el-col>
				</el-form-item>

				<el-form-item label="习惯">
					<el-col :span="10">
						<el-form-item prop="habit">
							<el-input v-model="form.habit"></el-input>
							<el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="兴趣" prop="interest">
							<el-input v-model="form.interest"></el-input>
						</el-form-item>
					</el-col>
				</el-form-item>
				<el-form-item label="性格">
					<el-col :span="10">
						<el-form-item prop="trait">	
							<el-input v-model="form.trait"></el-input>
						<el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="社交特点" prop="social">
							<el-input v-model="form.social"></el-input>
						</el-form-item>
					</el-col>
				</el-form-item>

				<el-form-item label="年收入">
					<el-col :span="10">
						<el-form-item prop="income">
							<el-input v-model="form.income"></el-input>
						<el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="消费习惯" prop="consumption">
							<el-select v-model="form.consumption" placeholder="请选择">
								<el-option :key="1251" label="品牌高贵" :value="1251"></el-option>
						        <el-option :key="1252" label="谨慎消费" :value="1252"></el-option>
						        <el-option :key="1253" label="偏好奢侈" :value="1253"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-form-item>
				<el-form-item>
					 <el-button @click="resetForm('form')">重置</el-button> 
		             <el-button type="primary" @click="submitForm('form')">立即创建</el-button> 
				</el-form-item>
			</el-form>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data() {
					return {
						
						form: {
							name: '',
							phone: '',
							cust:'',
							custid: '',
							
							linkmantype: '',
							business: '',
							sex: '',
							appellation: '',
							type: '',
							dept: '',
							duty: '',
							email: '',
							workphone: '',
							homephone: '',
							zip: '',
							wechat: '',
							like: '',
							idtype: '',
							idnum: '',
							remark: '',
							photo: '',
							habit: '',
							interest: '',
							trait: '',
							social: '',
							income: '',
							consumption: '',
							linid: ''
						},
						rules: { //数据源model
							name: [{
								required: true,
								message: '请输入名称',
								trigger: 'blur'
							}],
							phone: [{  required: true, message: '不能为空', trigger: 'blur' },
								{  min:11,max:11,message: '电话格式错误',  trigger: 'blur'},
								   {pattern: /^1[345678]\d{9}$/, message: '手机号格式错误'}],
						    workphone: [{  min:11,max:11,message: '电话格式错误',  trigger: 'blur'},
									 {pattern: /^1[345678]\d{9}$/, message: '手机号格式错误'}],   
							homephone: [{  min:11,max:11,message: '电话格式错误',  trigger: 'blur'},
								 {pattern: /^1[345678]\d{9}$/, message: '手机号格式错误'}],   
								 email: [
									 {pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/, message: '邮箱格式错误'}], 
							cust: [{
								required: true,
								message: '请选择客户',
								trigger: 'blur'
							}],
							
							
							sex: [{

								required: true,
								message: '请选择性别',
								trigger: 'blur'
							}],
							linkmantype: [{
								required: true,
								message: '请选择联系人分类',
								trigger: 'blur'
							}],
							
							idnum: [
								{  min:18,max:18,message: '身份证格式错误',  trigger: 'blur'},
								   {pattern: /^[1-9]\d{5}(18|19|2([0-9]))\d{2}(0[0-9]|10|11|12)([0-2][1-9]|30|31)\d{3}[0-9Xx]$/, message: '身份证格式错误'}],
							
							
							state: [
								//数据类型要是date
								{
									required: true,
									message: '请选择程度',
									trigger: 'blur'
								}
							],

							idtype: [
								//数据类型要是date
								{
									required: true,
									message: '请选择证件类型',
									trigger: 'blur'
								}
							],
							consumption: [
								//数据类型要是date
								{
									required: true,
									message: '请选择消费类型',
									trigger: 'blur'
								}
							],					
							income: [{pattern: /^[0-9]*$/, message: '金额格式错误'}],
							type: [{
                                required: true,
								message: '请选择类型',
								trigger: 'blur'
							}]	
						}
					}
				},
				methods: {
					submitForm(formName) {
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								var ax = null;
								if (JSON.stringify(${linkmanaaa}) == '{}') {
									ax = "/addlinkman";
								    console.log(1);
								}else{
									ax = "/updatelin";
									 console.log(2);
									
								}
								//post提交数据
								axios.post(ax,
									//参数转换
									Qs.stringify(this.form, {
										arrayFormat: 'brackets'
									})
								).then(function(v) {
									window.parent.location.replace("/linkman");
								}).catch(function(e) {
									alert("出错了"+e);
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
				
					

					//queryString实时的文本框的值,cb回调函数
					querySearch: function(queryString, cb) {
						 var allarr = this.form.restaurants;
				    	 // console.info(allarr);
				    	 
							var newsarr = [];
							allarr.forEach(v => {
								 var strs =v.cus_name+"";
								 if (strs.indexOf(queryString) >= 0) {
										newsarr.push(v);
										console.info(strs);
										console.info(v);
									} 
							})
							// 调用 callback 返回建议列表的数据
							cb(newsarr);
					},
					handleSelect: function(it) {
						this.form.cust=it.cus_name;
						this.form.custid=it.cus_id;
					}
				},
				mounted() {
					var dic=${dictionaryitem};
					//console.log(dic); 
					var mas=${mansitem};
					this.form.restaurants = mas;
					//console.log(this.form.restaurants); 
					var linkman = ${linkmanaaa};
						if(linkman){
							var news = ${linkmanaaa};
						}
						console.log(linkman);
					this.form.name = news.lin_name;                         
					this.form.phone = news.lin_phone;
					this.form.linkmantype = news.lin_classify;
					this.form.custid = news.cus_id;
					this.form.cust = news.cus_name;
					this.form.business = news.lin_responsible;
					this.form.sex = news.lin_sex;
					this.form.appellation = news.lin_title;
					this.form.type = news.lin_type; 
					this.form.dept = news.lin_department;
					this.form.duty = news.lin_duty;
					this.form.email = news.lin_email;
					this.form.workphone = news.lin_work_phone; 
					this.form.zip = news.lin_postcode;
					this.form.homephone = news.lin_home_phone; 
					this.form.wechat = news.lin_we_chat;
					this.form.like = news.lin_hobby;
					this.form.idtype = news.lin_id_cardtype;
					this.form.idnum = news.lin_id_card; 
					this.form.remark = news.lin_remark; 
					this.form.photo = news.lin_img;
					this.form.habit = news.lin_habit;
					this.form.interest = news.lin_interest;
					this.form.trait = news.lin_trait;
					this.form.social = news.lin_character;
					this.form.income = news.lin_year_income;
					this.form.consumption = news.lin_consumption_habit;
					this.form.linid = news.lin_id;
					
				}
			});
		</script>
	</body>

</html>
